<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cencat SaaS - 仪表盘</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            info: '#40A9FF',
            dark: '#1D2129',
            'dark-2': '#4E5969',
            'light-1': '#F2F3F5',
            'light-2': '#E5E6EB',
            'light-3': '#C9CDD4'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 2px 14px 0 rgba(0, 0, 0, 0.06)',
            'card-hover': '0 6px 20px 0 rgba(0, 0, 0, 0.1)',
            'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
            'modal': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
          }
        },
      }
    }
  </script>
  
  <style>
    body { font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; }
    html { scroll-behavior: smooth; }
    .progress-bar { transition: width 1s ease-in-out; }
    .table-row-hover { transition: background-color 0.2s ease; }
    .table-row-hover:hover { background-color: rgba(242, 243, 245, 0.5); }
    
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .animate-fade-in { animation: fadeIn 0.3s ease-in-out; }
    .animate-slide-in { animation: slideIn 0.3s ease-out; }
  </style>
</head>

<body class="bg-light-1 text-dark overflow-x-hidden">
  <div class="flex h-screen">
    <!-- 侧边栏导航 -->
    <aside id="sidebar" class="w-64 bg-white h-full shadow-md fixed left-0 top-0 z-30 transition-all duration-300 transform md:translate-x-0 -translate-x-full">
      <div class="p-4 border-b border-light-2 flex items-center space-x-3">
        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
          <i class="fa fa-cubes text-white text-xl"></i>
        </div>
        <div>
          <h1 class="text-lg font-bold text-primary">Cencat SaaS</h1>
          <p class="text-xs text-dark-2">多租户管理平台</p>
        </div>
        <button id="close-sidebar" class="ml-auto md:hidden text-dark-2 hover:text-primary">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <div class="p-4 border-b border-light-2">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-light-1 rounded-full overflow-hidden">
            <img src="https://picsum.photos/id/1005/200/200" alt="当前租户Logo" class="w-full h-full object-cover">
          </div>
          <div>
            <p class="font-medium text-sm">云帆科技有限公司</p>
            <p class="text-xs text-dark-2">企业版 | ID: T2025001</p>
          </div>
        </div>
        <button id="switch-tenant-btn" class="mt-3 w-full text-xs text-primary hover:text-primary/80 flex items-center justify-center space-x-1 transition-all duration-300">
          <i class="fa fa-exchange"></i>
          <span>切换租户</span>
        </button>
      </div>
      
      <nav class="p-3">
        <ul class="space-y-1">
          <li class="text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2">主导航</li>
          
          <li>
            <a href="dashboard.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg bg-primary/10 text-primary group transition-all duration-300">
              <i class="fa fa-dashboard w-5 h-5 mr-3"></i>
              <span>仪表盘</span>
            </a>
          </li>
          
          <li>
            <a href="tenants.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-building-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>租户管理</span>
            </a>
          </li>
          
          <li>
            <a href="resources.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-server w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>资源监控</span>
            </a>
          </li>
          
          <li>
            <a href="users.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-users w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>用户管理</span>
            </a>
          </li>
          
          <li>
            <a href="notifications.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-bell-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>通知中心</span>
              <span class="ml-auto bg-danger text-white text-xs px-1.5 py-0.5 rounded-full">3</span>
            </a>
          </li>
          
          <li class="mt-6 text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2">系统管理</li>
          
          <li>
            <a href="users.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-users w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>用户管理</span>
            </a>
          </li>
          
          <li>
            <a href="roles.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-user-circle w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>角色管理</span>
            </a>
          </li>
          
          <li>
            <a href="menus.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-bars w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>菜单管理</span>
            </a>
          </li>
          
          <li>
            <a href="departments.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-sitemap w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>部门管理</span>
            </a>
          </li>
          
          <li>
            <a href="positions.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-id-card w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>岗位管理</span>
            </a>
          </li>
          
          <li>
            <a href="dictionary.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-book w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>字典管理</span>
            </a>
          </li>
          
          <li>
            <a href="parameters.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-cog w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>参数设置</span>
            </a>
          </li>
          
          <li>
            <a href="configurations.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-key w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>配置管理</span>
            </a>
          </li>
          
          <li class="mt-6 text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2">AI赋能管理</li>
          
          <li>
            <a href="ai-code-generator.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-code w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>AI代码生成</span>
            </a>
          </li>
          
          <li>
            <a href="ai-log-diagnosis.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-bug w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>日志智能诊断</span>
            </a>
          </li>
          
          <li>
            <a href="ai-customer-service.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-comments-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>AI智能客服</span>
            </a>
          </li>
          
          <li>
            <a href="low-code-platform.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-puzzle-piece w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>低代码平台</span>
            </a>
          </li>
          
          <li class="mt-6 text-xs font-semibold text-dark-2 uppercase tracking-wider px-3 py-2">系统设置</li>
          
          <li>
            <a href="packages.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-tags w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>套餐管理</span>
            </a>
          </li>
          
          <li>
            <a href="security.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-shield w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>安全设置</span>
            </a>
          </li>
          
          <li>
            <a href="logs.html" class="flex items-center px-3 py-2.5 text-sm rounded-lg text-dark hover:bg-light-1 group transition-all duration-300">
              <i class="fa fa-file-text-o w-5 h-5 mr-3 text-dark-2 group-hover:text-dark transition-all duration-300"></i>
              <span>操作日志</span>
            </a>
          </li>
        </ul>
      </nav>
      
      <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-light-2">
        <div class="bg-light-1 rounded-lg p-3">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs text-dark-2">存储空间</span>
            <span class="text-xs font-medium">18.5GB / 50GB</span>
          </div>
          <div class="h-1.5 bg-light-2 rounded-full overflow-hidden">
            <div class="h-full bg-primary rounded-full progress-bar" style="width: 37%"></div>
          </div>
          <button class="mt-2 w-full text-xs bg-primary/10 text-primary py-1.5 rounded hover:bg-primary/20 transition-all duration-300">
            升级存储空间
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 md:ml-64 transition-all duration-300">
      <!-- 顶部导航栏 -->
      <header class="bg-white shadow-sm sticky top-0 z-20">
        <div class="flex items-center justify-between p-4">
          <div class="flex items-center">
            <button id="toggle-sidebar" class="mr-4 text-dark-2 hover:text-primary md:hidden">
              <i class="fa fa-bars text-xl"></i>
            </button>
            <div class="relative">
              <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-lg bg-light-1 text-sm w-64 focus:outline-none focus:ring-2 focus:ring-primary/30">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-dark-2"></i>
            </div>
          </div>
          
          <div class="flex items-center space-x-4">
            <div class="relative">
              <button id="notification-btn" class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-light-1 relative transition-all duration-300">
                <i class="fa fa-bell-o text-dark-2"></i>
                <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
              </button>
              
              <div id="notification-dropdown" class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-dropdown p-3 hidden animate-fade-in z-50">
                <div class="flex justify-between items-center mb-3">
                  <h3 class="font-medium">通知消息</h3>
                  <a href="notifications.html" class="text-xs text-primary hover:text-primary/80 transition-all duration-300">查看全部</a>
                </div>
                
                <div class="space-y-3 max-h-96 overflow-y-auto">
                  <div class="p-3 bg-primary/5 rounded-lg border-l-2 border-primary cursor-pointer hover:bg-primary/10 transition-all duration-300">
                    <div class="flex justify-between">
                      <p class="text-sm font-medium">租户资源预警</p>
                      <span class="text-xs text-dark-2">10分钟前</span>
                    </div>
                    <p class="text-xs text-dark-2 mt-1">租户"云帆科技"的存储空间已使用超过80%，建议升级套餐。</p>
                  </div>
                  
                  <div class="p-3 bg-primary/5 rounded-lg border-l-2 border-primary cursor-pointer hover:bg-primary/10 transition-all duration-300">
                    <div class="flex justify-between">
                      <p class="text-sm font-medium">新租户注册</p>
                      <span class="text-xs text-dark-2">1小时前</span>
                    </div>
                    <p class="text-xs text-dark-2 mt-1">租户"星辰教育"已完成注册，等待审核。</p>
                  </div>
                  
                  <div class="p-3 hover:bg-light-1 rounded-lg transition-all duration-300 cursor-pointer">
                    <div class="flex justify-between">
                      <p class="text-sm font-medium">系统维护通知</p>
                      <span class="text-xs text-dark-2">昨天</span>
                    </div>
                    <p class="text-xs text-dark-2 mt-1">本周六凌晨2点至4点将进行系统维护，期间服务可能中断。</p>
                  </div>
                </div>
              </div>
            </div>
            
            <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-light-1 transition-all duration-300">
              <i class="fa fa-question text-dark-2"></i>
            </button>
            
            <div class="relative">
              <button id="user-menu-btn" class="flex items-center space-x-2">
                <div class="w-9 h-9 rounded-full overflow-hidden border-2 border-transparent hover:border-primary transition-all duration-300">
                  <img src="https://picsum.photos/id/1012/200/200" alt="管理员头像" class="w-full h-full object-cover">
                </div>
                <div class="hidden md:block text-left">
                  <p class="text-sm font-medium">张管理员</p>
                  <p class="text-xs text-dark-2">超级管理员</p>
                </div>
                <i class="fa fa-angle-down text-dark-2 hidden md:block"></i>
              </button>
              
              <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-dropdown p-2 hidden animate-fade-in z-50">
                <a href="profile.html" class="block px-3 py-2 text-sm hover:bg-light-1 rounded transition-all duration-300">
                  <i class="fa fa-user-o mr-2 text-dark-2"></i>个人资料
                </a>
                <a href="account-settings.html" class="block px-3 py-2 text-sm hover:bg-light-1 rounded transition-all duration-300">
                  <i class="fa fa-cog mr-2 text-dark-2"></i>账户设置
                </a>
                <div class="border-t border-light-2 my-1"></div>
                <a href="login.html" class="block px-3 py-2 text-sm text-danger hover:bg-danger/10 rounded transition-all duration-300">
                  <i class="fa fa-sign-out mr-2"></i>退出登录
                </a>
              </div>
            </div>
          </div>
        </div>
      </header>

      <!-- 页面内容 -->
      <main class="p-4 md:p-6">
        <!-- 页面标题 -->
        <div class="mb-6 animate-fade-in">
          <div class="flex items-center">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">系统仪表盘</h2>
          </div>
          <p class="text-dark-2 mt-1">实时监控系统运行状态和租户资源使用情况</p>
        </div>

        <!-- 统计卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">总租户数</p>
                <p class="text-2xl font-bold text-dark mt-1">128</p>
                <p class="text-xs text-success mt-1">较上月增长 12%</p>
              </div>
              <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
                <i class="fa fa-building-o text-primary text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">活跃用户</p>
                <p class="text-2xl font-bold text-dark mt-1">2,847</p>
                <p class="text-xs text-success mt-1">今日新增 23</p>
              </div>
              <div class="w-12 h-12 bg-success/10 rounded-full flex items-center justify-center">
                <i class="fa fa-users text-success text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">API调用量</p>
                <p class="text-2xl font-bold text-dark mt-1">1.2M</p>
                <p class="text-xs text-warning mt-1">较昨日增长 8%</p>
              </div>
              <div class="w-12 h-12 bg-info/10 rounded-full flex items-center justify-center">
                <i class="fa fa-exchange text-info text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-dark-2">系统可用性</p>
                <p class="text-2xl font-bold text-dark mt-1">99.95%</p>
                <p class="text-xs text-success mt-1">本月无故障</p>
              </div>
              <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center">
                <i class="fa fa-check-circle text-secondary text-xl"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- 图表区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex justify-between items-center mb-5">
              <h3 class="font-semibold">租户增长趋势</h3>
              <div class="flex space-x-2">
                <button class="text-xs px-3 py-1 bg-primary text-white rounded-full">月</button>
                <button class="text-xs px-3 py-1 bg-light-1 text-dark-2 hover:bg-light-2 rounded-full transition-all duration-300">季</button>
                <button class="text-xs px-3 py-1 bg-light-1 text-dark-2 hover:bg-light-2 rounded-full transition-all duration-300">年</button>
              </div>
            </div>
            <div class="h-64">
              <canvas id="tenantGrowthChart"></canvas>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
            <div class="flex justify-between items-center mb-5">
              <h3 class="font-semibold">资源使用分布</h3>
              <div class="relative">
                <select class="pl-3 pr-8 py-1 rounded-lg bg-light-1 text-sm w-32 focus:outline-none focus:ring-2 focus:ring-primary/30 appearance-none">
                  <option value="cpu">CPU使用</option>
                  <option value="memory">内存使用</option>
                  <option value="storage">存储使用</option>
                </select>
                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-dark-2 text-xs"></i>
              </div>
            </div>
            <div class="h-64">
              <canvas id="resourceDistributionChart"></canvas>
            </div>
          </div>
        </div>

        <!-- 最近活动 -->
        <div class="bg-white rounded-xl shadow-card p-5 animate-slide-in">
          <div class="flex justify-between items-center mb-5">
            <h3 class="font-semibold">最近活动</h3>
            <a href="logs.html" class="text-sm text-primary hover:text-primary/80 transition-all duration-300">查看全部</a>
          </div>
          
          <div class="space-y-4">
            <div class="flex items-center justify-between p-3 hover:bg-light-1 rounded-lg transition-all duration-300">
              <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
                  <i class="fa fa-user-plus text-primary text-sm"></i>
                </div>
                <div>
                  <p class="text-sm font-medium">新租户注册</p>
                  <p class="text-xs text-dark-2">星辰教育科技有限公司</p>
                </div>
              </div>
              <div class="text-right">
                <p class="text-sm">2025-09-24</p>
                <p class="text-xs text-dark-2">14:30:22</p>
              </div>
            </div>
            
            <div class="flex items-center justify-between p-3 hover:bg-light-1 rounded-lg transition-all duration-300">
              <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-success/10 rounded-full flex items-center justify-center">
                  <i class="fa fa-refresh text-success text-sm"></i>
                </div>
                <div>
                  <p class="text-sm font-medium">套餐升级</p>
                  <p class="text-xs text-dark-2">云帆科技 → 旗舰版</p>
                </div>
              </div>
              <div class="text-right">
                <p class="text-sm">2025-09-24</p>
                <p class="text-xs text-dark-2">10:15:08</p>
              </div>
            </div>
            
            <div class="flex items-center justify-between p-3 hover:bg-light-1 rounded-lg transition-all duration-300">
              <div class="flex items-center space-x-3">
                <div class="w-8 h-8 bg-warning/10 rounded-full flex items-center justify-center">
                  <i class="fa fa-exclamation-triangle text-warning text-sm"></i>
                </div>
                <div>
                  <p class="text-sm font-medium">资源预警</p>
                  <p class="text-xs text-dark-2">腾飞网络存储空间不足</p>
                </div>
              </div>
              <div class="text-right">
                <p class="text-sm">2025-09-23</p>
                <p class="text-xs text-dark-2">16:45:33</p>
              </div>
            </div>
          </div>
        </div>
      </main>
      
      <footer class="bg-white border-t border-light-2 py-4 px-6 mt-6">
        <div class="flex flex-col md:flex-row justify-between items-center">
          <p class="text-sm text-dark-2">© 2025 Cencat SaaS 多租户管理平台. 保留所有权利.</p>
          <div class="flex space-x-4 mt-3 md:mt-0">
            <a href="help.html" class="text-sm text-dark-2 hover:text-primary transition-all duration-300">帮助中心</a>
            <a href="terms.html" class="text-sm text-dark-2 hover:text-primary transition-all duration-300">服务条款</a>
            <a href="privacy.html" class="text-sm text-dark-2 hover:text-primary transition-all duration-300">隐私政策</a>
          </div>
        </div>
      </footer>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化图表
      initCharts();
      
      // 侧边栏切换功能
      const sidebar = document.getElementById('sidebar');
      const toggleSidebar = document.getElementById('toggle-sidebar');
      const closeSidebar = document.getElementById('close-sidebar');
      const mainContent = document.querySelector('.flex-1');
      
      // 移动端侧边栏切换
      toggleSidebar.addEventListener('click', function() {
        sidebar.classList.toggle('-translate-x-full');
      });
      
      closeSidebar.addEventListener('click', function() {
        sidebar.classList.add('-translate-x-full');
      });
      
      // 桌面端侧边栏收缩功能
      let isSidebarCollapsed = false;
      
      // 添加收缩按钮到侧边栏顶部
      const collapseButton = document.createElement('button');
      collapseButton.innerHTML = '<i class="fa fa-chevron-left"></i>';
      collapseButton.className = 'absolute -right-3 top-4 w-6 h-6 bg-white rounded-full shadow-md flex items-center justify-center text-dark-2 hover:text-primary transition-all duration-300 z-10';
      collapseButton.title = '收缩侧边栏';
      
      // 找到侧边栏的第一个子元素并插入收缩按钮
      const sidebarHeader = sidebar.querySelector('.p-4.border-b');
      sidebarHeader.style.position = 'relative';
      sidebarHeader.appendChild(collapseButton);
      
      // 侧边栏收缩功能
      collapseButton.addEventListener('click', function() {
        isSidebarCollapsed = !isSidebarCollapsed;
        
        if (isSidebarCollapsed) {
          sidebar.style.width = '64px';
          sidebar.querySelectorAll('span').forEach(span => {
            span.style.opacity = '0';
            span.style.width = '0';
            span.style.overflow = 'hidden';
          });
          sidebar.querySelectorAll('i').forEach(icon => {
            icon.style.marginRight = '0';
          });
          collapseButton.innerHTML = '<i class="fa fa-chevron-right"></i>';
          collapseButton.title = '展开侧边栏';
          mainContent.style.marginLeft = '64px';
        } else {
          sidebar.style.width = '256px';
          sidebar.querySelectorAll('span').forEach(span => {
            span.style.opacity = '1';
            span.style.width = 'auto';
            span.style.overflow = 'visible';
          });
          sidebar.querySelectorAll('i').forEach(icon => {
            icon.style.marginRight = '12px';
          });
          collapseButton.innerHTML = '<i class="fa fa-chevron-left"></i>';
          collapseButton.title = '收缩侧边栏';
          mainContent.style.marginLeft = '256px';
        }
        
        // 添加过渡动画
        sidebar.style.transition = 'width 0.3s ease';
        mainContent.style.transition = 'margin-left 0.3s ease';
      });
      
      // 通知下拉框
      const notificationBtn = document.getElementById('notification-btn');
      const notificationDropdown = document.getElementById('notification-dropdown');
      
      notificationBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        notificationDropdown.classList.toggle('hidden');
        userDropdown.classList.add('hidden');
      });
      
      // 用户下拉框
      const userMenuBtn = document.getElementById('user-menu-btn');
      const userDropdown = document.getElementById('user-dropdown');
      
      userMenuBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        userDropdown.classList.toggle('hidden');
        notificationDropdown.classList.add('hidden');
      });
      
      document.addEventListener('click', function() {
        notificationDropdown.classList.add('hidden');
        userDropdown.classList.add('hidden');
      });
      
      // 窗口大小变化时调整侧边栏
      window.addEventListener('resize', function() {
        if (window.innerWidth < 768) {
          sidebar.classList.add('-translate-x-full');
          mainContent.style.marginLeft = '0';
        } else {
          sidebar.classList.remove('-translate-x-full');
          mainContent.style.marginLeft = isSidebarCollapsed ? '64px' : '256px';
        }
      });
    });
    
    function initCharts() {
      // 租户增长趋势图
      const growthCtx = document.getElementById('tenantGrowthChart').getContext('2d');
      new Chart(growthCtx, {
        type: 'line',
        data: {
          labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
          datasets: [{
            label: '新增租户',
            data: [8, 12, 15, 18, 22, 25, 30, 28, 32],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            tension: 0.4,
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: { display: false }
          }
        }
      });
      
      // 资源分布图
      const resourceCtx = document.getElementById('resourceDistributionChart').getContext('2d');
      new Chart(resourceCtx, {
        type: 'doughnut',
        data: {
          labels: ['正常使用', '轻度预警', '重度预警'],
          datasets: [{
            data: [85, 12, 3],
            backgroundColor: ['#52C41A', '#FAAD14', '#FF4D4F'],
            borderWidth: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          }
        }
      });
    }
  </script>
</body>
</html>